<template>
	<transition name="fade_top">
		<div class="search_wrap">

			<mu-appbar style="width: 100%;">
				<mu-button icon slot="left" :class="{'focus_icon' : focusFlag }">
					<img src="@/assets/load_error_3x.png" class="img_auto" alt="">
					<!-- <mu-icon value="mic" color="white"></mu-icon> -->
				</mu-button>
				<div :class="['search_input_wrap' , {'focus_input' : focusFlag }]" >
					<mu-button flat :ripple="false" class="search_icon" @click="focusSearch">
						<mu-icon value="search"></mu-icon>
						<span v-show="!focusFlag">搜索歌曲、歌手、专辑</span>
					</mu-button>
					<input type="text" name="search" ref="search_input" class="search_input" v-model="searchText" 
						@focus="focusSearch" @keyup.enter="handlerSearch" @keyup="getSuggest" />

					<mu-button flat :ripple="false" class="clear_icon" @click="searchResult = false;  searchText = ''; " v-show="searchText">
						<mu-icon value="clear"></mu-icon>
					</mu-button>
				</div>
				<mu-button icon slot="right" class="cancle" @click.native="focusFlag ? blurSearch() : handler2Account()">
					<mu-icon value="person" color="white" v-show="!focusFlag"></mu-icon>
					<!-- <mu-icon value="launch" color="white"></mu-icon> -->
					<div class="cancle_text" v-show="focusFlag">取消</div>
				</mu-button>
				<!-- <mu-text-field v-model="search"></mu-text-field> -->
			</mu-appbar>

			<section class="search_recommend_list" v-show="focusFlag">

				<!-- ! -->
				<hot-page v-show="!searchText" @handlerSearch="handlerSearch" :focusFlag="focusFlag"></hot-page>
				
				 <!-- && !searchResult -->
				<suggest v-show="searchText && !searchResult" 
				:searchText="searchText" :suggestList="suggestList" :loading_falg="loading"
				@handlerSearch="handlerSearch">
					<div data-mu-loading-color="secondary"
						v-loading="loading" class="loading_wrap" v-show="loading"></div>
				</suggest>

				<my-result v-show="searchResult" :resList="resList" :searchText="searchText" :resultType="resultType"
					@handlerScreenItem="handlerScreen" @loadMore="loadMore">
					<div data-mu-loading-color="secondary"
						v-loading="loadingRes" class="loading_wrap" v-show="loadingRes"></div>
				</my-result>

			</section>


		</div>
	</transition>
</template>

<script>
	import HotPage from '@/components/Search/HotPage'
	import Suggest from '@/components/Search/Suggest'
	import MyResult from '@/components/Search/Result'

	export default{
		name: "my_search",
		props:{
		},
		data(){
			return {
				searchText: '',
				searchResult: false,
				focusFlag: false,
				loading: false,
				loadingRes: false,
				suggestList: [],
				resList: [],

				resultType: "1",
				page: 0,
			}
		},
		created(){
		},
		mounted(){
			this.$nextTick(()=>{
				// this._getSearchHot();
			})
		},
		computed:{
			
		},
		watch:{
		},
		methods:{
			// _getSearchHot(){
			// 	this.$api.get(this.ApiPath.search.hot,{},success=>{
			// 		console.log(success)
			// 	})
			// },
			_searchResult(_next){
				this.page++;
				this.$api.get(this.ApiPath.search.index,{
					keywords: this.searchText,
					type: this.resultType,
					limit: this._GLOBAL.config.limit,
					offset: this.page*this._GLOBAL.config.limit,
				},success=>{
					this.loadingRes = false;
					for(var res in this._GLOBAL.config.search_result){
						if(res in success.data.result){
							// this.resType = res;
							success.data.result[res].map(r=>{
								this.resList.push(r);
							})
							console.log(res)
							console.log(success.data.result[res])
						}
					}
					this.$nextTick(()=>{
						_next ? _next() : '';
					})
					// this.resList = success.data.result;
				})
			},
			handlerSearch(){
				if(this.searchText === "") return;
				this.loadingRes = true;
				this.resList = [];
				this.page=-1;
				this._searchResult(next=>{
					this.searchResult = true;
					this.$store.commit('_set_search_history',this.searchText);
				});
			},
			loadMore(){
				this.loadingRes = true;
				this._searchResult(next=>{
				});
			},
			focusSearch(){
				this.focusFlag = true;
				this.$refs.search_input.focus()
            },
            blurSearch(){
            	this.searchResult = this.focusFlag = !this.focusFlag;
            	this.searchText = "";
            },
            getSuggest(event){
            	if(event.keyCode == 13 && this.searchText != "") {
    				this.loading = false;
    				this.searchResult = true;
            		return;
            	}
        		this.suggestList = [];
        		this.loading = true;
        		this.searchResult = false;
            	if(this.$utils.isNull(this.searchText.trim())){
            		return;
            	}

            	this.$api.get(this.ApiPath.search.suggest,{
            		keywords: this.searchText,
            		type: 'mobile',
            	},success=>{
            		this.suggestList = success.data.result.allMatch
		            this.$nextTick(()=>{
        				this.loading = false;
		            })
            	})
            },

            handlerScreen(key){
            	this.page = 0;
            	this.resList = [];
            	this.resultType = key;
            	this.$nextTick(()=>{
            		this.handlerSearch();
            	})
            },

            handler2Account(){
            	this.$router.push('/user');
            	// alert('分享');
            }

        },
        filters:{

        },
        components:{ 
        	HotPage,Suggest,MyResult
        }

    }
</script>

<style lang="scss" scoped>
@import '@/style/base/_color.scss';

/deep/ .loading_wrap{
	width: 100%;
	height: 100px;
	background-color: transparent!important;
	/*background: rgba(0,0,0,.7);*/
	position: relative;
	.mu-loading-wrap{
		background-color: transparent!important;
	}
}
.focus_icon{
	width: 0;
	padding: 0;
	transition: all .3s;
}


.mu-appbar{
	background-color: $red;
}
.cancle{
	padding-left: 0;
	padding-right: 0;
	.cancle_text{
		font-size: 16px;
		letter-spacing: 2px;
		color: white;
	}
}

.search_input_wrap{
	position: relative;
	width: 100%;
	&.focus_input{
		.search_input{
			padding-left: 48px;
		}
		.search_icon{
			left: 0; 
			transform: translateY(-50%);
			/*right: auto;*/

		}
	}
	.search_icon{
		position: absolute;
		/*left: calc(100% - 48px);*/
		left: 50%;

		/*right: 0;*/
		top: 50%;
		transform: translate(-50%,-50%);
		transition: all .3s;
		i{
			color: $red;
		}
	}

	.search_input{
		width: 100%;
		height: 100%;
		background-color: rgba(255,255,255,0.7);
		display: block;
		border-radius: 20px;
		padding: 5px 20px;
		font-size: 16px;
		height: 35px;
		line-height: 35px;
		letter-spacing: 1px;
	}
	.clear_icon{
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(8px,-50%);
		transition: all .3s;
		i{
			font-size: 13px;
			background: rgba(0,0,0,.3);
			border-radius: 50%;
			padding: 2px;
			color:  rgba(255,255,255,0.7);
		}
	}
}

.search_recommend_list{
	position: fixed;
	top: 56px; bottom: 0;
	left: 0; right: 0;
	z-index: 99;
	background-color: $border_4;
	padding: 10px;

}
</style>